<template>
  <!--<div>Index.vue</div>-->
  <el-container id="container">
    <!-- headerBar -->
     <el-header>
      <el-menu :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              @select="handleSelect">
        <el-sub-menu index="1">
          <template #title>系统说明</template>
          <el-menu-item index="1-1">功能简介</el-menu-item>
          <el-menu-item index="1-2">开发团队</el-menu-item>
          <el-menu-item index="1-3">致谢</el-menu-item>
        </el-sub-menu>
        <el-menu-item v-for="(value, key, index) in f"
                      :index="index+2">
          {{key}}
        </el-menu-item>
      </el-menu>
			<div class="user">
        <div class="avatar">
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg95.699pic.com%2Fxsj%2F14%2Fqu%2Fq9.jpg%21%2Ffw%2F700%2Fwatermark%2Furl%2FL3hzai93YXRlcl9kZXRhaWwyLnBuZw%2Falign%2Fsoutheast&refer=http%3A%2F%2Fimg95.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658849247&t=e51e18a89aedfc74ff6ab2a2cd8fd8da"
               draggable="false"
               alt="">
        </div>
        <div class="username">{{$store.state.user.username}} 欢迎你！</div>
      </div>
    </el-header>
    <!-- 页面主体 -->
    <el-container>
      <!-- aside -->
      <el-aside>
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
                    active-text-color="#ffd04b"
                    background-color="#545c64"
                    class="el-menu-vertical-demo"
                    default-active="2"
                    text-color="#fff"
                    @open="handleOpen"
                    @close="handleClose"
            >
              <aside-menu v-for="(item, index) in menuData"
                          :index="index+1"
                          v-show="key==index+1"
                          :sub-index="index+1"
                          :sub-item="item">
              </aside-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <!-- main -->
      <el-main>
        <router-view class="routerView" :key="$route.fullPath"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import AsideMenu from './asideMenu/AsideMenu'
  import {convert} from "../plugins/utils";

  let str1 = "发送邮件: /sendmail, 收件箱总览: /receivemail, 查看邮件: /checkmail, 草稿夹: /draft, 垃圾箱: /dustbin";
  let str2 = "员工列表: /employee, 入离职管理: /management, 员工调动: /transfer";
  let str3 = "查看公告: /viewinform, 发布公告: /releaseinform, 管理公告: /manageinform, 公告概览: /informoverview, 修改公告: /modifyinform";
  let str4 = "个人文档: /myfile, 公共文档: /publicfile, 审核文档: /viewfile";
  let str5 = "个人考勤: /personalattendance, 考勤管理: /attendancemanagement";
  let str6 = "密码修改: /password, 个人信息修改: /information";
  export default {
    name: "Index",
    data() {
      return {
        activeIndex: '1-1',
        key: 1,
        menuData: [],
        indexToPage: {
          1: '/email',
          2: '/personnel',
          3: '/notification',
          4: '/document',
          5: '/attendance',
          6: '/system'
        },
        f: {
          '电子邮件': str1,
          '人事信息管理': str2,
          '通知公告': str3,
          '文档管理': str4,
          '考勤':str5,
          '系统管理': str6
        }
      }
    },
    components: {
      AsideMenu
    },
    created() {
      for (const key in this.f) {
        // console.log(key, this.f[key])
        this.menuData.push({
          title: key,
          menuData: convert(this.f[key])
        })
      }
      this.key = 0;
    },
    methods: {
      handleSelect(key, keypath) {
        this.key = key-1;
      },
    },
    mounted() {
      this.$bus.on('clickMenuItem', obj => {
        // console.log(obj);
        console.log(this.indexToPage[obj.index] + obj.path);
        this.$router.push(this.indexToPage[obj.index] + obj.path);
      })
    }
  }
</script>

<style lang="scss">
  body {
    background-color: #ffffff;
  }

  #container {
    height: 100%;
  }
  
   .user {
    display: flex;
    justify-content: space-around;
    width: 180px;
    height: 40px;
    position: absolute;
    z-index: 9999;
    right: 0;
    top: 10px;
    color: white;
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
  }
  .avatar img {
    width: 100%;
  }
  .username {
    line-height: 40px;
  }
</style>
